<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
        <canvas id="pieMap" width="500" height="500" style="border:1px black solid;"></canvas>
    </body>
 </html>
 <script type="text/javascript">
 var color=["#FF0000","#00FF00","#0000FF","#FF00FF","#00FFFF","#FFFF00"];
 var data=[10,20,30,15,8,17];
 var list=new Array(data.length);
 function GetFanShape(id,x0,y0)
 {
     var angle_Start=0;
     //圆心坐标
     var rx=100;
     var ry=100;
     var x=0;
     var y=0;
     //x1,y1为弧的起点
     for(var i=0;i<data.length;i++)
     {
         if(id==i)
         {
             rx=x0;
             ry=y0;
         }
         else
         {
             rx=100;
             ry=100;
         }
         var x1=0;
         var y1=0;
         if(x==0&&y==0)
         {
             x1=rx+100*(Math.cos(angle_Start*Math.PI/180));
             y1=ry+100*(Math.sin(angle_Start*Math.PI/180));
         }
         else
         {
             x1=x;
             y1=y;
         }
         //x3,y3 为弧上中点位置的坐标
      var x3=rx+100*(Math.cos(((angle_Start+Math.PI*(data[i]/100))+Math.PI*2*(data[i]/100)*Math.PI/180)));
      var y3=ry+100*(Math.sin(((angle_Start+Math.PI*(data[i]/100))+Math.PI*2*(data[i]/100)*Math.PI/180)));
       
      angle_Start+=Math.PI*2*(data[i]/100);
      //x2,y2为弧的终点
      var x2=rx+100*(Math.cos((angle_Start+Math.PI*2*(data[i]/100)*Math.PI/180)));
      var y2=ry+100*(Math.sin((angle_Start+Math.PI*2*(data[i]/100)*Math.PI/180)));
      x=x2;
      y=y2;
      var FanShape={};
      FanShape.Id=i;
      FanShape.x1=x1;
      FanShape.y1=y1;
      FanShape.x2=x2;
      FanShape.y2=y2;
      FanShape.x3=x3;
      FanShape.y3=y3;
      FanShape.x=rx;
      FanShape.y=ry;
      FanShape.data=data[i];
      //半径
      FanShape.r=100;
      list[i]=FanShape;     
     }
 }
 function PieMap(id)
 {
     var canvas=document.getElementById("pieMap");
     var pie=canvas.getContext("2d");
     pie.save();
     pie.clearRect(0,0,500,500);
     pie.translate(100,100);
     
     //画弧度
     var angle_Start=0;    
     for(var i=0;i<data.length;i++)
     {
         pie.beginPath();
         if(i==id)
         {
         var sh=list[id];
         var x= (sh.x1+sh.x2)/2;
         var y=(sh.y1+sh.y2)/2;
         x=(100+x)/2;
         y=(100+y)/2;
         
         x=(100+x)/2;
         y=(100+y)/2;
         GetFanShape(id,x,y);
         pie.moveTo(x,y);
         pie.arc(x,y,100,angle_Start,angle_Start+Math.PI*2*(data[i]/100),false);    
         }
         else
         {
             pie.moveTo(100,100);
             pie.arc(100,100,100,angle_Start,angle_Start+Math.PI*2*(data[i]/100),false);    
         }
         pie.fillStyle=color[i];
         pie.fill();
         angle_Start+=Math.PI*2*(data[i]/100);
     }    
     //writeText(pie);
     writeLine(pie);
     pie.restore();
 }
 
      //判断鼠标所在的区域
     function GetFanShapeId(x,y)
     {
         var id=-1;
         for(var i=0;i<list.length;i++)
         {
             var s=list[i];
             var p={};
             p.x=x-100;
             p.y=y-100;
             var a={};
             a.x=s.x;
             a.y=s.y; 
             var b={};
             b.x=s.x1;
             b.y=s.y1;
             var c={};
             c.x=s.x2;
             c.y=s.y2;
             var result=GetArea(a,b,c)-GetArea(p,a,b)-GetArea(p,b,c)-GetArea(p,c,a);
             if(result>=0)
             {
                 id=s.Id;                
             }
         }
         return id;
     }
     
     //三角形的面积
     function GetArea(A,B,C)
     {
         var result=Math.abs((A.x-C.x)*(B.y-C.y)-(B.x-C.x)*(A.y-C.y))/2;
         return result;
     }
     //扇形外画线
     function writeLine(pie)
     {
         for(var i=0;i<list.length;i++)
         {
             var s=list[i];
             pie.save();
             pie.beginPath();
             pie.fillStyle="black";
             pie.moveTo(s.x3,s.y3);
             var p=getXY(s.x,s.y,s.x3,s.y3);
             pie.lineTo(p.x,p.y);
             pie.fillText(s.data+"%",p.x,p.y);
             pie.stroke();
             pie.restore();
         }
     }
     function MouseCanva(e)
     {
         var flg=-1;
         if(e.layerX||e.layerY==0)
         {
             flg=GetFanShapeId(e.layerX,e.layerY);
         }
         if(flg!=-1)
         {
             document.getElementById("pieMap").style.cursor="pointer";
         }
         else
         {
             document.getElementById("pieMap").style.cursor="";
         }
     }
     
     //鼠标点击事件
     function CanvaClick(e)
     {
         var id=-1;
         if(e.layerX||e.layerY==0)
         {
             id=GetFanShapeId(e.layerX,e.layerY);
         }
         if(id==-1)
         {//鼠标点击不在 扇形区内 让图形恢复初始状态
           GetFanShape(-1,100,100);
         }
         //鼠标点击的是哪个扇形    
         PieMap(id);
     }
      window.onload=function(){
          GetFanShape(-1,100,100);
          PieMap(-1);
        
         var canva=document.getElementById("pieMap");
         canva.addEventListener("click",CanvaClick,true);
         canva.addEventListener("mousemove",MouseCanva,true);
     }
     
     //亮点之间的距离
     function getDistance(x1,y1,x2,y2)
     {
         return Math.sqrt((Math.pow(x1-x2,2)+Math.pow(y1-y2,2)));
     }
     
     var xy={};
      //获取扇形外直线的终点
      //参数一 圆心坐标X和Y，扇形中点坐标X和Y
     function getXY(rx,ry,x3,y3)
     {
          xy.x=(3*x3-rx)/2;
          xy.y=(3*y3-ry)/2
         return xy;
     }
 </script>